<template>
  <div class="dialog-overlay" @click="$emit('close')">
    <div class="dialog code-dialog" @click.stop>
      <div class="dialog-header">
        <h2>验证码</h2>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      
      <div class="dialog-body">
        <div v-if="token" class="token-info">
          <strong>{{ token.serviceName }}</strong>
          <span v-if="token.accountName">{{ token.accountName }}</span>
        </div>
        
        <div v-if="code" class="code-display">
          <div class="code">{{ formatCode(code.code) }}</div>
          <div class="progress-bar">
            <div 
              class="progress-fill" 
              :style="{ width: progressPercent + '%' }"
              :class="{ 'warning': remainingSeconds <= 10 }"
            ></div>
          </div>
          <div class="time-remaining">
            剩余 {{ remainingSeconds }} 秒
          </div>
        </div>
        
        <div v-else-if="loading" class="loading">
          <div class="spinner"></div>
          <p>正在生成验证码...</p>
        </div>
        
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        
        <div class="dialog-actions">
          <button 
            @click="handleCopy" 
            class="btn btn-primary"
            :disabled="!code"
          >
            📋 复制验证码
          </button>
          <button @click="$emit('close')" class="btn btn-secondary">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue';
import { copyToClipboard } from '@/utils/helpers';

const props = defineProps({
  code: {
    type: Object,
    default: null,
  },
  token: {
    type: Object,
    default: null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  error: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['close', 'copy']);

const remainingSeconds = ref(0);
let countdownInterval = null;

const progressPercent = computed(() => {
  if (!props.code) return 0;
  const period = props.code.period || 30;
  return (remainingSeconds.value / period) * 100;
});

function formatCode(code) {
  if (!code) return '';
  // 格式化为 XXX XXX 格式
  return code.replace(/(\d{3})(\d{3})/, '$1 $2');
}

async function handleCopy() {
  if (!props.code) return;
  
  const success = await copyToClipboard(props.code.code);
  if (success) {
    emit('copy');
    // 可以添加一个提示
    alert('验证码已复制到剪贴板');
  } else {
    alert('复制失败，请手动复制');
  }
}

function startCountdown() {
  if (countdownInterval) {
    clearInterval(countdownInterval);
  }
  
  if (props.code?.remainingSeconds) {
    remainingSeconds.value = props.code.remainingSeconds;
    
    countdownInterval = setInterval(() => {
      remainingSeconds.value--;
      
      if (remainingSeconds.value <= 0) {
        clearInterval(countdownInterval);
      }
    }, 1000);
  }
}

watch(
  () => props.code,
  (newCode) => {
    if (newCode) {
      startCountdown();
    }
  },
  { immediate: true }
);

onUnmounted(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval);
  }
});
</script>

<style scoped>
.code-dialog {
  max-width: 450px;
}

.dialog-body {
  padding: 24px;
}

.token-info {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.token-info strong {
  display: block;
  font-size: 18px;
  color: var(--text-color, #333);
  margin-bottom: 4px;
}

.token-info span {
  font-size: 14px;
  color: var(--text-secondary, #6b7280);
}

.code-display {
  text-align: center;
  padding: 32px 0;
}

.code {
  font-size: 56px;
  font-weight: bold;
  color: var(--primary-color, #3b82f6);
  letter-spacing: 8px;
  margin-bottom: 24px;
  font-family: 'Courier New', monospace;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color, #3b82f6);
  transition: width 1s linear;
  border-radius: 4px;
}

.progress-fill.warning {
  background: #f59e0b;
}

.time-remaining {
  font-size: 18px;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

.loading {
  text-align: center;
  padding: 40px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid var(--bg-secondary, #f3f4f6);
  border-top-color: var(--primary-color, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading p {
  color: var(--text-secondary, #6b7280);
}

.error-message {
  margin-bottom: 20px;
  padding: 12px;
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  color: #c33;
  font-size: 14px;
  text-align: center;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.dialog-actions .btn {
  flex: 1;
  max-width: 200px;
}

/* 深色模式 */
.dark-theme .token-info {
  border-bottom-color: #374151;
}

.dark-theme .progress-bar {
  background: #374151;
}
</style>

